﻿<!DOCTYPE html>
<html><head>
  <title>颜色扩展</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=8">
  <meta name="generator" content="Help &amp; Manual">
  <meta name="keywords" content="Color,COLR,CPAL,Fonts,Fonts Color,SVG">
  <meta name="description" content="There are two scalable color extensions. COLR; initiatedby Microsoft, using internal tables COLR and CPAL SVG; initially proposedby Mozilla andAdobe, using a SVG table...">
  <link type="text/css" href="default.css" rel="stylesheet">
  <link type="text/css" href="custom.css" rel="stylesheet">
  <style type="text/css" media="screen">
      html,body { margin:0;
        padding:0;
       background: #ffffff;
      }
      div#printheader { display: none; }
      #idheader {
        width:100%;
        height:auto;
        padding: 0;
        margin: 0;
        position: fixed;
        top: 0;
        z-index: 2;
      }
      /* The "min-height" for "#idheader table" ensures that the (blue) header of the topic
         has at least the same height as the header of the navigation panel left of it */
      #idheader table {background: #2C5D88; min-height: 59px }
      #idheader h1 span { color: #FFF }
      #idnav {
        text-align: right;
        width: 126px;
        vertical-align: middle;
      }
      #idnav a { text-decoration: none }
      #idnav span {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-left: 4px;
       background:url('hm_webhelp_buttons_grey.png') top left no-repeat;
      }
      #idnav a span {
       background-image:url('hm_webhelp_buttons_white.png');
      }
      #idnav a span:hover {
       background-image:url('hm_webhelp_buttons_orange.png');
      }
      #idnav span.hmbtnprev {background-position: 0 -32px }
      #idnav span.hmbtnnext {background-position: -24px -32px }
      #idnav span.hmbtntop  {background-position: -48px -32px }
      #idnav span.hmbtntoggle  { width: 20px;background-position: -70px -32px }
      #idnav span.hmbtnprint  {background-position: -88px -32px }
      #callout-table, #overview-table {display:block; position:relative; top:0; left:0;}
      #callout-icon {display:block; position:absolute; top:-11px; left:-11px;}
      #callout-icon-flag {display:block; position:absolute; top:-11px; left:-8px;}
      #callout-table a {text-decoration: none; color:blue;}
      #callout-table a:visited {text-decoration: none; color:blue;}
      #overview-table a {text-decoration: none; color:black;}
      #overview-table a:visited {text-decoration: none; color:black;}
      #callout-table a:hover, #overview-table a:hover {text-decoration: underline;}
      p.help-url { margin: 20px 0 5px 0; text-align: center; font-size: 80%; text-decoration: none }
      #switchtoggles { text-align: right; padding: 0 2px 0 0; font-size: 90%; }
      .sync-toc { color: #FFF; font-size: 8pt; font-weight:bold; display: none; }
      .sync-toc a { color: #FFF; text-decoration: none; font-weight:bold;}
      .sync-toc a:visited { color: #FFF; }
      .sync-toc a:hover { text-decoration: underline; }
      a.hmanchor { display: inline-block; margin-top: -4em; padding-top: 4em }	
  </style>
  <style type="text/css" media="print">
      div#idheader, img.dropdown-toggle-icon, p.help-url { display:none }
  </style>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="helpman_settings.js"></script>
  <script type="text/javascript" src="helpman_topicinit.js"></script>
</head>
<body>
<div id="printheader"><h1 class="p_Heading1" style="page-break-after: avoid;"><span class="f_Heading1">颜色扩展</span></h1>
</div>
<div id="idheader" style="position: relative;">
<div id="idheaderbg">
<table style="width:100%;border:none;margin:0px;" cellspacing="0" cellpadding="0">
 <tbody><tr>
   <td class="topichead" style="text-align:left; vertical-align:bottom">
     <p class="crumbs"><b>导航：</b>关于字体 &gt;</p>
     <h1 class="p_Heading1" style="page-break-after: avoid;"><span class="f_Heading1">颜色扩展</span></h1>
   </td>
   <td class="topichead" id="idnav">
     <a href="fc_variable.html" title="上一主题"><span class="hmbtnprev"></span></a>
     <a href="welcometothefontcreator.html" title="返回首章"><span class="hmbtntop"></span></a>
     <a href="aboutfontswoff.html" title="下一主题"><span class="hmbtnnext"></span></a>
   </td>
 </tr>
</tbody></table>
</div>
</div>
<div id="idcontent" style="margin-top: 0px;"><div id="innerdiv">
<!--ZOOMRESTART-->
<p class="p_Normal">有两种可缩放的颜色扩展。</p>
<p class="p_Normal" style="text-indent: 0; padding-left: 0.1354in; margin-left: 0;"><span style="display:inline-block;width:0.1354in;margin-left:-0.1354in;font-size:12pt;font-family:'Wingdings';font-style:normal;color:#000000;text-decoration:none;">&#167;</span>COLR：由 Microsoft 发起，使用内部表 COLR 和 CPAL</p><p class="p_Normal" style="text-indent: 0; padding-left: 0.1354in; margin-left: 0;"><span style="display:inline-block;width:0.1354in;margin-left:-0.1354in;font-size:12pt;font-family:'Wingdings';font-style:normal;color:#000000;text-decoration:none;">&#167;</span>SVG：最初由 Mozilla 和&nbsp;Adobe&nbsp;提出，使用 SVG 表（可选择与 CPAL 一起使用）</p><p class="p_Normal"><span style="font-weight:bold;">COLR（和所需的 CPAL）</span></p>
<p class="p_Normal">正如 2013 年 6 月的 Microsoft Build 开发者大会所揭示的那样，Windows 8.1 对 OpenType 字体标准进行了革命性的扩展，引入了多色字体。这项技术既简单又强大，使用的是多层字形，本质上这些字形仍是可缩放轮廓(outline)，可以像任何其他字符一样进行渲染和处理，只是每个层使用内部表 COLR 和 CPAL，都有自己的颜色。</p>
<p class="p_Normal">&nbsp;</p>
<p class="p_Normal">High-Logic 坚信这项新技术将打开新的多彩之门，这就是 FontCreator 成为第一款支持新多色字体扩展的字体编辑器的原因。</p>
<p class="p_Normal">&nbsp;</p>
<p class="p_Normal">颜色扩展的好处是，在还不支持扩展的设备和系统上，彩色字体将继续像任何其他字体一样正常使用。这就是为什么我们强烈建议每个字形始终包括基本轮廓的原因（在不支持或在特定环境不需要彩色字体的情况下作为后备）。目前，这是唯一能与可变字体一起使用的颜色扩展。</p>
<p class="p_Normal">&nbsp;</p>
<p class="p_Normal"><span style="font-weight:bold;">SVG（和可选的 CPAL）</span></p>
<p class="p_Normal">此扩展使用可缩放矢量图形（SVG）文档。FontCreator 中还没有可视化 SVG 编辑器，但您可以从 COLR 扩展中生成 SVG 颜色格式，您还可以为每个字形导入 SVG 文档。</p>
<p class="p_Normal">&nbsp;</p>
<p class="p_Normal"><span style="font-weight:bold;">选择哪一个？</span></p>
<p class="p_Normal">好吧，如果您不需要渐变色，并且您的调色板中没有太多颜色，我们建议使用 COLR 格式，您也可以自动导出为 SVG 格式，而无需任何额外的设计工作。所有主流的网络浏览器以及越来越多的 Windows 软件（如 Word 和 paint.net 都已支持 COLR 格式。</p>
<p class="p_Normal">&nbsp;</p>
<p class="p_Normal">大多数 Adobe 软件都支持 OpenType SVG 彩色字体，但基于 Chromium 的浏览器目前不支持 SVG 扩展，例如 Chrome、Opera 和 Vivaldi。</p>
<p class="p_Normal">&nbsp;</p>
<p class="p_Normal"><span style="font-weight:bold;">对彩色字体扩展的支持</span></p>
<p class="p_Normal">并非所有软件和网络浏览器都支持可缩放的颜色扩展。我们的在线颜色教程中收集了更完整的列表：</p>
<p class="p_Normal"><a href="https://www.high-logic.com/font-editor/fontcreator/tutorials" target="_blank" class="weblink">https://www.high-logic.com/font-editor/fontcreator/tutorials</a></p>
<p class="p_Normal">&nbsp;</p>
<p class="p_Normal">&nbsp;</p>
<!--ZOOMSTOP-->
</div></div>
<script type="text/javascript">
  $(document).ready(function(){
    $(window).bind('resize', function() {
      var y = $('#idheader').height();
      $('#idcontent').css('margin-top', y);
      var par = window.parent;
      if ($( par ).width()<= $( window ).width()+20) {
        $('#idheader').css('position', 'relative');
        $('#idcontent').css('margin-top', 0);
        $('#idbacktotop').css('display', 'block');
        $('.hmanchor').css('margin-top', -20);
	$('.hmanchor').css('padding-top', 20);
      }
      else {
        $('#idheader').css('position', 'fixed');
        $('#idcontent').css('margin-top', $('#idheader').height());
        $('#idbacktotop').css('display', 'none');
        $('.hmanchor').css('margin-top', -y-20);
	$('.hmanchor').css('padding-top', y+20);
      }
    });
    $(window).resize(); //trigger event for initially small displays
  });
</script>
</body></html>